<template>
  <div class="app-container">
    <el-row>
      <div class="border-shadow"> 授权角色：{{ $route.query.roleName }}</div>
    </el-row>
    <el-row>
      <span style="font-weight: bold">权限名称：</span>
      <el-input style="padding: 10px;width: 30%" placeholder="请输入权限名称" v-model.trim="filterText"/>
      <el-tree
        class="my-tree"
        v-loading="listLoading"
        ref="tree"
        :data="allMenuList"
        node-key="id"
        show-checkbox
        default-expand-all
        :filter-node-method="filterNode"
        :props="defaultProps"
      />
    </el-row>
    <div style="padding: 20px 20px;">
      <el-button type="warning" @click="$router.push('/system/sysRole')" size="mini" icon="el-icon-refresh-right">返回
      </el-button>
      <el-button :loading="loading" type="primary" icon="el-icon-check" size="mini" @click="save">保存</el-button>
    </div>
  </div>
</template>

<script>
import api from '@/api/system/sysMenu'

export default {
  name: "assignAuth",
  data() {
    return {
      filterText: '',
      listLoading: true,
      loading: false,
      fetchDataSuccess: false, // 增加一个标志位，表示数据是否已经获取成功
      allMenuList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
    }
  },
  watch: {
    filterText(val) {
      if (this.fetchDataSuccess) {
        this.$refs.tree.filter(val)
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    filterNode(value, data) {
      if (!value || !data || !data.name) {
        return true; // 如果没有搜索关键字、数据或数据名称，则返回 true
      }
      const name = data.name.toLowerCase(); // 将节点名转换为小写字母方便比较
      if (name.includes(value.toLowerCase())) {
        return true; // 如果当前节点的名称包含搜索关键字，则返回 true
      }
      if (!data.children || !data.children.length) {
        return false; // 如果当前节点没有子节点，则返回 false
      }
      // 递归检查子节点是否符合条件
      return data.children.some(child => this.filterNode(value, child));
    },
    fetchData() {
      const roleId = this.$route.query.id
      api.findRoleMenu(roleId).then(res => {
        this.listLoading = false
        this.allMenuList = res.data.allMenu
        let ids = res.data.roleMenu.map(m => m.id)
        this.$refs.tree.setCheckedKeys(ids)
        this.fetchDataSuccess = true // 数据获取成功
      })

    },
    save() {
      const allCheckedNodes = this.$refs.tree.getCheckedNodes(false,true)
      let ids = allCheckedNodes.map(node => node.id)
      const  data = {
        roleId : this.$route.query.id,
        menuIds: ids
      }
      api.saveRoleMenu(data).then(res =>{
        this.$message.success('保存成功')
        this.fetchData()
      })
    },
  }
}
</script>

<style scoped>
.el-button--primary {
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}

.el-button--primary {
  background-image: linear-gradient(to right, #00C9FF, #92FE9D);
  color: #fff;
}

.border-shadow {
  width: 20%;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #e5e9f2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 20px;
  font-weight: bold;
  background-image: linear-gradient(to bottom, #6B63FF, #A463FF);
}

.my-tree {
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
}

.el-tree-node__content :hover {
  background-color: gray;
}
</style>
